<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>瑞成火锅</title>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/contact.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="register">
    <div class="div_header" style="background: url('../img/瑞成捕获.JPG');">
      <header>
        <div style="display: flex; padding-top: 2%; padding-left: 3%;">
          <div style="flex: 1;">
            <div style="display: flex; padding-left: 5%;">
              <img src="../img/logo3.png" width="150px" alt="">
              <!-- <h3 style="color: #fff;">瑞成火锅</h3> -->
            </div>
          </div>
          <div class="div_header_div_ul">
            <div style="width: 80%;margin-top: 1.5%;">
              <ul style="display: flex;">
                <li><a href="./home.html">首页</a></li>
                <li><a href="./Century-old_brand.html">百年品牌</a></li>
                <li><a href="./Brand_strength.html">品牌实力</a></li>
                <li><a href="./cooperation.html">特许合作</a></li>
                <li><a href="./Legendary_dishes.html">传奇菜品</a></li>
                <li><a href="./Store_navigation.html">门店导航</a></li>
                <li><a href="./contact.html">联系我们</a></li>
                <li><a href="./message.html">留言</a></li>
                <li id="li_1"><a href="./login.html">登录/注册</a></li>
                <li id="li_2"><a href="./userInfo.html">个人中心</a></li>
              </ul>
            </div>
            <div style="margin-top: 1.5%;">
              <input type="text" style=" border: 1 solid #181890; height: 30px; width: 150px;border-radius: 0;" v-model="name">
              <button style="border: 0;padding: 3px 5px;background-color: #fff;" @click="search()">搜索</button>
            </div>
          </div>
        </div>
      </header>
      <!-- 注册 -->
      <section style="position: relative;height: 100vh; width: 100%;overflow: hidden;">
        <div
          style="width: 35%; height: 46%; background-color: #fff;z-index: 99;position: relative;margin: auto;margin-top: 15%;text-align: center;padding-top: 1%;">
          <form action="" method="post">
            <h3>注册</h3>
            <input style="border-bottom: 1px solid #000;margin-top: 1%;padding-left: 15px;" type="text"
              v-model="ruleForm.account" placeholder="账号">
            <p></p>
            <input style="border-bottom: 1px solid #000;margin-top: 1%; padding-left: 15px;" type="password"
              placeholder="密码" v-model="ruleForm.password">
            <p></p>
            <input style="border-bottom: 1px solid #000;margin-top: 1%; padding-left: 15px;" type="password"
              placeholder="再次输入密码" v-model="ruleForm.pass">
            <p></p>
            <button style="border: 0; padding: 15px 30px;" type="button" @click="register()">注册</button>
            <p></p>
            <p>已有账号？<a href="./login.html">去登陆</a></p>
          </form>
        </div>
      </section>
    </div>
    <!-- 页尾 -->
    <footer style="background-color: #000; padding: 3% 15%;">
      <div style="display: flex;">
        <div style="display: flex; width: 80%; flex-wrap: wrap;">
          <h6 class="footer_h6">首页</h6>
          <h6 class="footer_h6">百年品牌</h6>
          <h6 class="footer_h6">品牌实力</h6>
          <h6 class="footer_h6">特许合作</h6>
          <h6 class="footer_h6">传奇菜品</h6>
          <h6 class="footer_h6">门店导航</h6>
          <h6 class="footer_h6">联系我们</h6>
          <div style="width: 100%;padding-left: 3%;">
            <span class="footer_span">友情链接： 火锅加盟 美兆品牌 辣斗辣火锅</span><br>
            <span class="footer_span"> 蜀ICP备123456789号 网站建设：瑞成火锅</span><br>
            <span class="footer_span">风险提示：投资有风险，请理性选择</span>
          </div>
        </div>
        <div>
          <img src="../img/erweima.jpg" width="150px" alt="">
        </div>
      </div>
    </footer>
  </div>
</body>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  new Vue({
    el: '#register',
    data() {
      return {
        ruleForm: {},
        name: ""
      }
    },
    methods: {
      // 注册
      async register() {
        // 判断两次密码是否一致
        if (this.ruleForm.password !== this.ruleForm.pass) {
          this.$message.error("两次输入的密码不一致，请重新输入！");
        }
        const { data: result } = await this.$http.post("http://localhost:9092/hot_user/register", this.ruleForm);
        if (result.flag) {
          this.$message.success(result.message);
          window.location.href = './login.html';
        } else {
          this.$message.error(result.message);
        }
      },
      // 搜索
      search() {
        localStorage.setItem("name", this.name);
        window.location.href = './Legendary_dishes.html';
      }
    }
  })
</script>

</html>